<template>
  <div>
      <el-container>
        <el-header>
          <div v-if="this.$store.state.name?this.$store.state.name:name">
           <el-dropdown>
            <span class="el-dropdown-link">
              {{name?name:this.$store.state.name}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item ><router-link tag="span" to="/ResetPassword"  class="spanbox" >修改密码</router-link></el-dropdown-item>
              <el-dropdown-item ><span @click="Signout"  class="spanbox">退出登录</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </div>
          <div v-else>
            <router-link to="/login" tag="span" class="login">登录</router-link>
          </div>

    
        </el-header>
          <el-container>
            <el-aside width="200px">
                <!-- <img src="./images/44.png" alt="" class="logo"> -->
                 <el-col :span="24">
                      <div class="logo">

                          <i class="iconfont icon-icon-test"></i>
                      </div>
                      <div class="Title">
                        工作人员管理平台
                      </div>

                      <router-link to="/Statistics" tag="a" class="tab">
                        <i class="iconfont icon-caidan"></i>
                        <p>展示大图</p>
                      </router-link>

                      <router-link to="/State" tag="a" class="tab">
                        <i class="iconfont icon-ren"></i>
                        <p>设置状态</p>
                      </router-link>

                      <router-link to="/Journal" tag="a" class="tab">
                        <i class="iconfont icon-shuju"></i>
                        <p>历史记录</p>
                      </router-link>
                  </el-col>
            </el-aside>
            <el-main>
              <transition name="fade"
		            mode="out-in">
              <router-view/>
              </transition>
            </el-main>
        </el-container>
  </el-container>

  
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: sessionStorage.getItem("name"),
      flag: false
    };
  },
  methods: {
    // 退出
    Signout() {
      this.name = "";
      this.company = "";
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("company");
      sessionStorage.removeItem("name");
      this.$router.push({ path: "/login" });
    }
  }

};
</script>



<style lang="scss" scoped>
body {
	margin: 0px;
	padding: 0px;
	/*background: url(assets/bg1.jpg) center !important;
		background-size: cover;*/
	// background: #1F2D3D;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}
.tab{
  width: 100%;
  height: 100px;
  text-align: center;
  padding-top: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
  color: #fff;
  display: block;
  text-decoration: none;
  i{
    font-size: 30px;
  }
}

.tab-bg{
  background-color: #232323;
  color: #0076FB;
}
.logo{
  width: 90px;
  height: 90px;
  line-height: 90px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  margin: 0 auto;
  margin-top: 35px;
  i{
    font-size: 50px;
    color: #0076FB;
  }
}

.Title{
  font-size: 16px;
  text-align: center;
  font-family: 微软雅黑;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 60px;
}

.el-header,
.el-footer {
  width: 100%;
  background-color: #fff;
  color: #000;
  text-align: right;
  height: 64px;
  line-height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8888;
}
.el-dropdown {
  color: #B6B7BA;
  font-size: 16px;
}

.el-aside {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #363636;
  z-index: 88888;
  height: 1000px;
}

.el-main {
  background-color: #EEEEEE;
  color: #333;
  margin-top: 60px;
  margin-left: 200px;
}

body > .el-container {
  margin-bottom: 40px;
}

</style>
